<template>
	<!-- <view class='list'> -->
		
		<swiper class="home-swiper" :current="activeIndex" @change="change"  >
			<swiper-item class="swiper-item" v-for="(item, index) in tab" :key="index">
				<list-item :list="listCatchData[index]" :load="load[index]"  @loadmore="loadmore"></list-item>
			</swiper-item>
		</swiper>
		
		
	<!-- </view> -->
</template>

<script>
	import listItem from './list-item.vue'
	
	export default {
		props:{
			tab:{
				type:Array,
				default(){
					return []
				}
			},
			activeIndex:{
				type:Number,
				default:0
			}
		},
		components:{
			listItem
		},
		data() {
			return {
				list:[],
				listCatchData:{},
				load:{},
				pageSize:5
			};
		},
		//onlond 不能在组件中使用
		created(){
			//TODO index.vue 的tab值可能还没有拿到，所以使用第0项的属性（name属性）未定义，报错，使用监听watch，当变化了再执行操作
			// this.getList(0)
			uni.$on('update_article',(e)=>{
				console.log(e)
				if(e === "follow"){
					this.listCatchData = {}
					this.load = {}
					this.getList(this.activeIndex)
				}
				
			})
		},
		watch:{
			tab(newVal){
				if(newVal.length === 0) return
				this.listCatchData = {}
				this.load = {}
				this.getList(this.activeIndex)
			}
		},
		methods:{
			loadmore(){
				if(this.load[this.activeIndex].loading === 'noMore')return
				// this.page++
				this.load[this.activeIndex].page++
				console.log('触发上拉')
				this.getList(this.activeIndex)
			},
			change(e){
				const {current} = e.detail
				console.log(current);
				// console.log(this.tab[current].name) 
				this.$emit('change',current)
				
				//TODO  当 【该项】 数据不存在或数据长度为0 的时候才去请求 【该项】 数据
				if(!this.listCatchData[current]  || this.listCatchData[current] === 0){
					this.getList(current)//调取云函数，获取信息
				}
			},
			
			getList(current,name){
				if(!this.load[current]){
					this.load[current]={
						page:1,
						loading:'loading'
					}
				}
				console.log('当前页数',this.load[current].page)
				this.$api.get_list({
				//TODO  在created 里 index.vue 的tab值可能还没有拿到，所以使用第0项的属性（name属性）未定义，报错
				    name:this.tab[current].name,
					page:this.load[current].page,
					pageSize:this.pageSize
				}).then((res)=>{
					console.log(res)
					const {data}=res;
					 
					 console.log('获取的数据',data.length)
					 
					 if(data.length === 0){
						 let oldLoad = {}
						 oldLoad.loading = "noMore"
						 //当进入这一条件时只没给page赋值，再次下拉请求时发现page不存在，会报错数据库请求问题，所以要设置page
						 oldLoad.page = this.load[current].page
						 this.$set(this.load, current, oldLoad)//数据无渲染
						 //强制渲染页面
						 this.$forceUpdate()
						 return
					 }
					 
					let oldList=this.listCatchData[current] || []
					oldList.push(...data)  //(...data)将data数组展开
					
					// this.listCatchData[current]=data  /这种js 的赋值方式 页面无响应，应该使用this.$set()方法
					//使用响应式this.$set(对象, key, 数据)
					//数据懒加载
					this.$set(this.listCatchData, current, oldList)
					
				})
			}
		},
		
	}
</script>

<style lang='scss' scoped>
/* .list{
	height: 100%; */
	/* background-color: yellow; */
	
	.home-swiper{
		/* border:1px solid blue; */
		height:100%;
		.swiper-item{
			height:100%;
		}
	
	}
/* } */

</style>
